<template>
  <section>
    <main>
      <div class="pink">家校通知</div>
      <div class="model">
        <div class="body">
          <div class="form">
            <el-form ref="form" :model="form" label-width="80px">
              <el-col :span="24">
                <el-form-item label="发送对象">
                  <el-input type="textarea" v-model="form.name" :disabled="true" :autosize="{ minRows: 1, maxRows: 3}" resize='none'></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="通知内容">
                  <el-input type="textarea" v-model="form.situation" :autosize="{ minRows: 12}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <div class="kong"></div>
              </el-col>
              <div class="upload_box">
                <el-upload
                  ref="upload"
                  action="http://119.23.36.128:8020/yxt-web/notice/upload"
                  :headers= "this.xtoken"
                  list-type="picture-card"
                  :multiple='true'
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" :modal-append-to-body="false" size="tiny">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
              <!-- <div class="address_list"></div> -->
              <el-col :span="24">
                <div class="scent_btn">
                  <!-- <el-button type="danger" @click="submitAll">确认发送</el-button> -->
                  <button class="btn btn-danger" @click="submitAll">确认发送</button>
                </div>
              </el-col>
            </el-form>
          </div>
          <div class="right">
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>

            <el-tree
              @check-change="checkChange"
              class="filter-tree"
              :data="data2"
              show-checkbox
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree2">
            </el-tree>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </main>
  </section>
</template>

<script>
export default {
  data () {
    return {
      xtoken: {},
      data2: [{
        id: 1,
        label: '行政部',
        children: [{
          id: 6,
          label: '欧阳俊逸1-1'
        },
        {
          id: 7,
          label: '欧阳俊逸1-2'
        }]
      },
      {
        id: 2,
        label: '行政部',
        children: [{
          id: 8,
          label: '欧阳俊逸2-1'
        },
        {
          id: 9,
          label: '欧阳俊逸2-2'
        }]
      },
      {
        id: 3,
        label: '行政部',
        children: [{
          id: 10,
          label: '欧阳俊逸'
        },
        {
          id: 11,
          label: '欧阳俊逸'
        }]
      },
      {
        id: 4,
        label: '行政部',
        children: [{
          id: 12,
          label: '欧阳俊逸'
        },
        {
          id: 13,
          label: '欧阳俊逸'
        }]
      },
      {
        id: 5,
        label: '行政部',
        children: [{
          id: 14,
          label: '欧阳俊逸'
        },
        {
          id: 15,
          label: '欧阳俊逸'
        }]
      }],
      form: {
        name: null,
        grade: null,
        grademsg: [{
          value: '1',
          label: '一年级'
        },
        {
          value: '2',
          label: '二年级'
        }],
        class: null,
        classmsg: [{
          value: '1',
          label: '一班'
        },
        {
          value: '1',
          label: '二班'
        }],
        course: null,
        time: null,
        situation: null
      },
      filterText: null,
      dialogImageUrl: null,
      dialogVisible: false,
      watch: {
        filterText (val) {
          this.$refs.tree2.filter(val)
        }
      }
    }
  },
  mounted () {
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
    this.$http.post(this._httpUrl + 'public/organizeGroup/groupAndTeachers', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        this.data2 = response.data.data
        for (var i = 0; i < this.data2.length; i++) {
          this.data2[i].label = this.data2[i].groupName
          this.data2[i].children = this.data2[i].teachers
          for (var a = 0; a < this.data2[i].teachers.length; a++) {
            this.data2[i].children[a].label = this.data2[i].teachers[a].name
            this.data2[i].children[a].id = this.data2[i].teachers[a].id
          }
        }
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  },
  methods: {
    getCheckedNodes () {},
    checkChange (leafOnly) {
      let dataRecieve = []
      for (var i = 0; i < this.$refs.tree2.getCheckedNodes(leafOnly).length; i++) {
        dataRecieve.push(this.$refs.tree2.getCheckedNodes(leafOnly)[i].label)
      }
      this.form.name = dataRecieve.join(',')
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handlePreview (file) {
      console.log(file)
    },
    submitAll (leafOnly) {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.senderData = this.$refs.tree2.getCheckedNodes(leafOnly)
      let temp = []
      for (var i = 0; i < this.senderData.length; i++) {
        // delete this.senderData[i].label
        let obj = {
          sendee: this.senderData[i].name,
          sendeeId: this.senderData[i].id,
          openid: this.senderData[i].openid,
          sendeeType: '2'
        }
        temp.push(obj)
      }
      this.$http.post(this._httpUrl + 'homeSchool/notice/sendNotification',
        {
          content: this.form.desc,
          sendeeType: '2',
          noticeType: '3',
          templateCode: 'FAwrnNEibx-RQWMLyKosyQZcNns7oM6NHBYTmsk-NTw',
          sendee: temp,
          attachments: this.attachments
        }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
          if (response.body.code === '000') {
            this.$router.push('/homeSchool/notice/sendNotification')
          } else if (response.body.code === '887') {
            this.$router.push('/')
          } else if (response.body.code === '889') {
            this.$router.push('/')
          }
        })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/material-dashboard.css';
.scent_btn
{
  text-align: center;
}
main{
  position: relative;
  .pink{
    width: 104px;
    height: 64px;
    position: absolute;
    left: 3%;
    top: -20px;
    background: #E12C6C;
    border-radius: 4px;
    text-align: center;
    line-height: 70px;
    color: #fff;
    z-index: 2;
  }
  .model{
    width: 98%;
    background: #FFF;
    margin-left: 1%;
    margin-top: 60px;
    border-radius: 5px;
    padding-top: 10px;
    overflow: hidden;
    .body{
      padding: 50px 10px 20px 0%;
      header{
        border-bottom: 2px solid #D7D7D7;
        padding-bottom: 10px;
        .title{
          border-bottom: 2px solid #FB7862;
          padding: 10px;
          color: #FB7862;
        }
      }
      .form{
        width: 66%;
        padding: 30px 20px 20px 40px;
        float: left;
        .upload_box{
          float: right;
          width: 88%;
        }
      }
      .right{
      width: 24%;
      float: right;
      margin-right: 4%;
      padding-top: 34px;
      // display: inline-block;
      }
      .clear{
      clear:both;
      }
    }
  }
}
</style>
